<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>杂七杂八</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="收集一些前端相关的东西">
		<meta name="author" content="Ben">
		<link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="styles/docs.css">
	</head>
	<body>
		<header class="navbar navbar-fixed-top bs-docs-nav" id="top" role="banner">
			<div class="container">
				<div class="navbar-header">
					<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					</button>
					<a href="../" class="navbar-brand">杂七杂八</a>
				</div>
				<nav id="bs-navbar" class="collapse navbar-collapse">
					<ul class="nav navbar-nav">
						<li><a href="#tools">Tools</a></li>
						<li><a href="#Demos">Demos</a></li>
					</ul>
				</nav>
			</div>
		</header>

		

		<div id="box">
			<div class="container bs-docs-container">
				<h2>
					<a href="#tools" class="anchorjs-link">小工具</a>
				</h2>
				<a class="btn btn-outline" href="csp/src/index.html" target="_blank">
					生成雪碧图
				</a>
				<a class="btn btn-outline" href="fr/index.html" target="_blank">
					生成preload fileset
				</a>
				<a class="btn btn-outline" href="fr/index2.html" target="_blank">
					读取图片宽高生成css
				</a>
				<a class="btn btn-outline" href="ckc.html" target="_blank">
					CSS3动画帧数计算器
				</a>
			</div>

			<div class="container bs-docs-container">
				<h2>
					<a href="#tools" class="anchorjs-link">在线工具</a>
				</h2>
				<a class="btn btn-outline" href="http://www.secaibi.com/tools/" target="_blank">
					图片压缩 <small>（色彩笔）</small>
				</a>
				<a class="btn btn-outline" href="http://zhitu.isux.us/" target="_blank">
					图片压缩 <small>（智图）</small>
				</a>
				<a class="btn btn-outline" href="http://www.520ued.com/tools/rem" target="_blank">
					px转rem工具
				</a>
				<a class="btn btn-outline" href="http://daneden.github.io/animate.css/" target="_blank">
					ANIMATE CSS <small>（动画参考）</small>
				</a>
				<a class="btn btn-outline" href="http://www.colorzilla.com/gradient-editor/" target="_blank">
					CSS3 渐变生成器
				</a>			
			</div>

			<div class="container bs-docs-container">
				<h2>
					<a href="#tools" class="anchorjs-link">在线文档-教程</a>
				</h2>
				<a class="btn btn-outline" href="http://tool.oschina.net/apidocs" target="_blank">
					常用API文档索引<small>（oschina）</small>
				</a>
				<a class="btn btn-outline" href="http://es6.ruanyifeng.com/" target="_blank">
					ECMAScript 6入门
				</a>
				<a class="btn btn-outline" href="http://www.jquery123.com/" target="_blank">
					jQuery API 中文文档
				</a>
				<a class="btn btn-outline" href="http://www.zhangxinxu.com/sp/seajs/docs/zh-cn/module-definition.html" target="_blank">
					Sea.js 手册与文档
				</a>
				<a class="btn btn-outline" href="http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html" target="_blank">
					微信JS-SDK说明文档
				</a>
				<a class="btn btn-outline" href="http://nodeapi.ucdok.com/#/api/documentation.html" target="_blank">
					Node.js v0.10.18 手册 & 文档
				</a>
				<a class="btn btn-outline" href="http://docs.sequelizejs.com/en/latest/" target="_blank">
					sequelizejs <small>( 提供对 MySQL,MariaDB,SQLite 和 PostgreSQL 数据库的简单访问)</small>
				</a>
				<a class="btn btn-outline" href="http://www.cocos.com/doc/tutorial/index?type=cocos2d-js" target="_blank">
					Cocos2d-JS <small>(教程)</small>
				</a>
				<a class="btn btn-outline" href="http://www.expressjs.com.cn/" target="_blank">
					Express <small>(基于 Node.js 平台，快速、开放、极简的 web 开发框架)</small>
				</a>
			</div>

			<div class="container bs-docs-container">
				<h2>
					<a href="#plugin" class="anchorjs-link">各种前端插件</a>
				</h2>
				<a class="btn btn-outline" href="https://github.com/marcuswestin/store.js" target="_blank">
					localStorage 操作插件
				</a>
			</div>

			<div class="container bs-docs-container">
				<h2>
					<a href="#linux" class="anchorjs-link">Linux 相关</a>
				</h2>
				<a class="btn btn-outline" href="http://blog.csdn.net/wendi_0506/article/details/39478369" target="_blank">
					编译安装Mysql
				</a>
				<a class="btn btn-outline" href="http://www.cnblogs.com/kunhu/p/3633002.html" target="_blank">
					安装 Nginx
				</a>
			</div>
		</div>
		
		<script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
		<script src="http://cdn.staticfile.org/store.js/1.3.14/store.min.js"></script>
		<script>
		$(document).ready(function() {
			
			var _fav_html = '<div class="container bs-docs-container" id="fav"><h2><a href="#fav" class="anchorjs-link">用快捷入口</a></h2><div id="kj">{{__CONT__}}</div></div>';

			var $box = $('#box');
			window.fav_obj = store.get('_fav_btns')||{
				"createTime": new Date().getTime(),
				"list":{}
			};

			$box.find('a')
				.each(function(index, el) {
					$(this).attr('id','a_' + index);
				})
				.click(function(event) {
					if(this.id){
						if(fav_obj["list"][this.id]){
							fav_obj["list"][this.id].count ++;
						}else{
							fav_obj["list"][this.id] = {
								count:1,
								textContent:this.textContent,
								href:this.href
							};
						}

						store.set('_fav_btns',fav_obj);
					}
				});

			var _list = fav_obj.list;

			$.each(_list, function(index, val) {
				console.log(val)
			});


		});

		</script>

	</body>
</html>